<template>
  <div>
    <div class="bdsharebuttonbox ">

      <!-- 以下链接和setShare()中的bdSelectMiniList属性相对应 -->
      <a href="#" class="bds_more" data-cmd="more"></a>
      <a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
      <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
      <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
    </div>
  </div>
</template>

<script>
  export default {
    name: "share",
    data() {
      return {};
    },
    mounted: function() {
      const that = this;
      setTimeout(() => {
        that.setShare();
      }, 0);
    },
    methods: {
      setShare() {
        //分享相关代码
        var shop_Id= this.$route.query.shopId
        window._bd_share_config = {
          common: {
            bdSnsKey: {},
            bdText: '测试',//分享的内容
            bdMini: "1",//下拉浮层中分享按钮的列数
            bdMiniList: false,//自定义下拉浮层中的分享按钮类型和排列顺序。
            bdPic: '',//分享的图片
            bdStyle: "1",
            bdSize: "32",//分享按钮的尺寸
            bdUrl:'http://pay.zjc158.com/stcwx/#/farmIndex?shopId='+shop_Id,//分享的Url地址
          },
          share: {},
          image:{
            "viewList":["sqq", "qzone","weixin"],//自定义展示层中的分享按钮类型和排列顺序。
            "viewText":"分享到：",
            "viewSize":"16",//图片分享展示层的图标大小。
          },
          selectShare: {
            bdContainerClass: null,
            // 这里和html标签里链接相对应
            bdSelectMiniList: ["sqq", "qzone","weixin"]
          }
        };
        const s = document.createElement("script");
        s.type = "text/javascript";
        s.src =
          "/static/api/js/share.js?v=89860593.js?cdnversion=" + ~(-new Date() / 36e5);
        document.body.appendChild(s);

        // 百度分享有自动销毁的逻辑，加这么一段代码   重新初始化就没问题了。
        if (window._bd_share_main) {
          window._bd_share_main.init();
        }
      }
    }
  };
</script>

<style scoped>
  .bdsharebuttonbox {
    width: 100%;
    height: 0.6rem;
    line-height: 1rem;
    background: #fff;
    position: fixed;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
</style>
